<template>

  <n-form-item :label="component.description" :path="component.type" class="creative-component-form-item">
    <n-switch v-model:value="component.switch" :disabled="component.required">
    </n-switch>
  </n-form-item>
  <div v-if="component.switch" class="creative-component-secend-form-item">
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      :show-require-mark="true"
      v-if="childrenComponent.end_page_type" :rule="formRule.end_page_type">
      <div class="flex-1 flex">
        <label class="text-right mr-10 text-label">视频结束页类型</label>
        <n-radio-group v-model:value="form.end_page_type">
          <n-radio-button :value="item.value" v-for="item in optional">{{ item.label }}</n-radio-button>
        </n-radio-group>
      </div>
    </n-form-item>
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="childrenComponent.end_page_desc" :rule="formRule.end_page_desc" :show-require-mark="true">
      <div class="flex-1 flex">
        <label class="text-right mr-10 text-label">结束页描述</label>
        <n-input :maxlength="textRules.max_length" :minlength="textRules.min_length"
          v-model:value="form.end_page_desc" :show-count="true"></n-input>
      </div>
    </n-form-item>
  </div>




</template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, unref, watch } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch, NInput } from 'naive-ui';

import {
  NDatePicker,
  NFormItem,
  NRadioGroup,
  NRadioButton
} from 'naive-ui'
const store = useStore();

const creativor = computed(() => store.state.adv.modal.creativor);
const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});

const component = toRef<any, any>(props, 'component')
const childrenComponent = computed(() => component.value.children || {});
const optional = computed(() => {
  const { enumeration } = childrenComponent.value.end_page_type && childrenComponent.value.end_page_type.enum_property ? childrenComponent.value.end_page_type.enum_property : {} as any;
  return (enumeration || []).map(_ => {
    return {
      ..._,
      label: _['description'],
      value: _['value']
    }
  })
})

const textRules = computed(() => {
  return childrenComponent.value.end_page_desc && childrenComponent.value.end_page_desc.restriction && childrenComponent.value.end_page_desc.restriction.text_restriction || {}
})

const form = reactive({
  switch: component.value.switch || component.value.required,
  end_page_desc: component.value.value.end_page_desc || '',
  end_page_type: component.value.value.end_page_type || '',
});
watch(form, () => {
  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: Object.assign({}, form)
  })
})

const formRule = reactive({
  end_page_type: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.end_page_type) {
        return new Error('请选择视频结束页类型!')
      }
      return true;
    }
  },
  end_page_desc: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.end_page_type) {
        return new Error('请填写创意文案!')
      }
      return true;
    }
  },
})










</script>

<style lang="scss">
@import url('./style.scss');
</style>
